<!DOCTYPE html>
<html>
    
    <head> 

        <title>jQuery docHeightChange</title>

        <style type="text/css">

            .bigger {
                background: aqua;
                position: relative;
                width: 300px;
                height: 500px;
            }

            .bigger span {
                position: absolute;
                top: 50%;
                display: block;
                text-align: center;
                width: 100%;
            }

            .console {
                position: absolute;
                top: 0;
                right: 0;
            }

        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.docheightchange.js"></script>
        <script type="text/javascript" src="scripts.js"></script>

    </head>

    <body>

        <div class="bigger">

            <span>Click to make bigger</span>

        </div>

        <div class="console"></div>

    </body>

</html>